<template>
  <div class="app-container">

    <el-form label-width="120px">
      <el-form-item label="幻灯片标题">
        <el-input v-model="banner.title"/>
      </el-form-item>

      <el-form-item label="排序">
        <el-input-number v-model="banner.sort" :min="0"  controls-position="right"/>
      </el-form-item>

      <!-- 幻灯片图片 -->
      <el-form-item label="幻灯片">

          <!-- 缩略图 -->
          <pan-thumb :image="banner.imageUrl"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换幻灯片
          </el-button>

          <!--
          v-show：是否显示上传组件
          :key：类似于id，如果一个页面多个图片上传控件，可以做区分
          :url：后台上传的url地址
          @close：关闭上传组件
          @crop-upload-success：上传成功后的回调 -->
          <image-cropper
                        v-show="imagecropperShow"
                        :width="450"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/eduoss/file/upload'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>

      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import banner from '@/api/cms/banner'
// 引入文件上传组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

const defaultForm = {
  title: '',
  sort: 0,
  imageUrl: process.env.OSS_PATH + '/index.jpg'
}

export default {
  // 声明上传组件
  components: { ImageCropper, PanThumb },
  data() {
    return{
      banner: {
        defaultForm
      },
      imagecropperShow: false, // 上传弹窗组件是否显示
      imagecropperKey: 0, // 上传组件id
      BASE_API: process.env.BASE_API, // 获取dev.env.js里面的BASE_API地址
      saveBtnDisabled: false // 保存按钮是否禁用（预防用户多次提交）
    }
  },
  // 监听
  watch: {
    $route(to, from) {  // to,from 表示路由变化的方式，当路由发生变化，方法就会执行
      console.log('watch $route')
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 关闭上传弹窗组件
    close(){
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 上传头像成功
    cropSuccess(data){
      this.imagecropperShow = false
      // 上传之后接口返回头像地址
      this.banner.imageUrl = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },

    init(){
      // this.$route.params 获取路由中的参数
      if(this.$route.params && this.$route.params.id){  // 判断路由中是否有参数并且参数id存在
        // id存在做数据回显
        const id = this.$route.params.id
        this.fetchDataById(id)
      }else{  // id不存在清空表单数据
        this.banner = defaultForm
      }
    },

    saveOrUpdate() {
      this.saveBtnDisabled = true
      // 判断id是否存在
      if(!this.banner.id){
        this.saveBanner()
      }else{
        this.updateDataById()
      }
    },

    // 添加讲师
    saveBanner() {
      banner.addBanner(this.banner)
        .then(() => {
          // 提示信息
          return this.$message({
            type: 'success',
            message: '添加成功！'
          })
        })
        .then(() =>{
          // 回到列表页面，路由跳转（重定向）
          this.$router.push({path: '/cms/banner'})
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '添加失败'
          })
        })
    },

    // 根据id查询记录
    fetchDataById(id){
      banner.getBanner(id)
        .then(response => {
          this.banner = response.data.item
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '获取数据失败！'
          })
        })
    },

    // 根据id修改记录
    updateDataById(){
      this.saveBtnDisabled = true // 防止用户多次点击
      banner.updateBanner(this.banner)
        .then(() => {
          // 提示信息
          return this.$message({
            type: 'success',
            message: '修改成功！'
          })
        })
        .then(() => {
          this.$router.push({path: '/cms/banner'})
        })
    }

  }
}
</script>